<script src="/public/js/jquery-1.2.6.min.js" type="text/javascript">
</script>

<script src="/public/js/spin.js" type="text/javascript">
</script>

<div class="toolbar">
	<h1 id="pageTitle">
		SpecRunner
	</h1>
</div>

<%@color = @code == 0 ? "#00ff00" : "#ff0000"%>

<ul id="specrunner" title="SpecRunner" selected="true">
	<% if @msg %><li style="color:<%=@color%>" align="center"><%=@msg%></li><% end %>
    <li id="total" style="color:<%=@color%>">waiting results...</li>
    <li id="passed" style="color:<%=@color%>">waiting results...</li>
    <li id="failed" style="color:<%=@color%>">waiting results...</li>
    <li id="messages" style="color:<%=@color%>">waiting results...</li>
    
</ul>


<script>

  window.onload=function() {

  var opts = {
    lines: 13 // The number of lines to draw
  , length: 28 // The length of each line
  , width: 14 // The line thickness
  , radius: 42 // The radius of the inner circle
  , scale: 1 // Scales overall size of the spinner
  , corners: 1 // Corner roundness (0..1)
  , color: '#000' // #rgb or #rrggbb or array of colors
  , opacity: 0.25 // Opacity of the lines
  , rotate: 0 // The rotation offset
  , direction: 1 // 1: clockwise, -1: counterclockwise
  , speed: 1 // Rounds per second
  , trail: 60 // Afterglow percentage
  , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
  , zIndex: 2e9 // The z-index (defaults to 2000000000)
  , className: 'spinner' // The CSS class to assign to the spinner
  , top: '50%' // Top position relative to parent
  , left: '50%' // Left position relative to parent
  , shadow: false // Whether to render a shadow
  , hwaccel: false // Whether to use hardware acceleration
  , position: 'absolute' // Element positioning
  }

  var target = document.getElementById('specrunner')
  var spinner = new Spinner(opts).spin(target);

  $.ajax({
    url: '/app/SpecRunner/run_specs',
    dataType: 'json',
    timeout: -1,
    success: function(response) {
      total.innerText = response.total;
      passed.innerText = response.passed;
      failed.innerText = response.failed;
      messages.innerText = response.messages;

      spinner.stop();
    },

    error: function() {
      total.innerText = "Test run error";
      passed.innerText = "Test run error";
      failed.innerText = "Test run error";
      messages.innerText = "Test run error";

      spinner.stop();
    }

    });

    }
</script>